<template>
	<!-- 报废(列表) -->
	<view class="check-assets">
		<picker :range="pickerRange" @change="bindPickerChange" :disabled="pickerDisabled">
			<view class="tab-posi">
				<NewSegmentedControl :current="current" :values="items" style-type="text" active-color="#198a6c"
					@clickItem="onClickItem" />
			</view>
		</picker>
		<searchPopup :show="toShow" ref="toSearch" @clickFu="receive" />
		<view class="content">
			<view v-if="current === 0">
				<uni-card :title="item.assetName" v-for="item in repairList" :key="item.assetExecDtlId">
					<template v-slot:title>
						<view class="card-title">
							<view style="width: 80%;">
								<text>{{item.assetName}}</text>
							</view>
							<text class="right-txt">{{item.statusCh}}</text>
						</view>
					</template>
					<uni-list :border="false">
						<uni-list-item showArrow
							:to="`/pages/scrapEquipment/scrapDetail/index?assetExecDtlId=${item.assetExecDtlId}`">
							<template v-slot:body>
								<view class="slot-box">
									<view class="list-content">
										<view>
											资产编号：{{item.assetNo}}
										</view>
										<view>
											所在位置：{{item.applyUnitName}}
										</view>
									</view>
								</view>
							</template>
						</uni-list-item>
					</uni-list>
					<view slot="actions" class="card-actions" v-if="item.status==5||item.statusCh=='处理中'">
						<button size="mini" class="repair-btn" @click="completeRepairBtn(item)"
							v-if="item.status==5">实施</button>
						<button size="mini" class="repair-btn" @click="confirmRepairBtn(item)"
							v-if="item.statusCh=='处理中'">确认完成</button>
					</view>
				</uni-card>
				<!-- 加载结束 -->
				<view class="uni-loadmore" v-if="showLoadMore">{{loadMoreText}}</view>
				<view class="bottom-btn">
					<button class="start-button" @click="repairEquipment"><text class="iconfont icon-saoyisao"
							style="margin-right: 20rpx;"></text>报废设备</button>
				</view>
			</view>

		</view>
		<!-- 确认弹窗 -->
		<!-- <uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="warning" cancelText="取消" confirmText="确认" title="" :content="dialogContent"
				@confirm="dialogConfirm"></uni-popup-dialog>
		</uni-popup> -->
		<MessageTip ref="messageTip" :tipContent="dialogContent" @clickType="handleShowOrHideTip"/>

		<!-- 底部报废按钮弹窗 -->
		<uni-popup ref="popup" background-color="#fff">
			<view class="popup-content" @click="scan"><text class="text">扫一扫</text></view>
			<view class="popup-content" @click="inputNum"><text class="text">去列表选择资产</text></view>
		</uni-popup>
		
		<!-- 状态 -->
		<!-- <uni-popup ref="popupStatus" background-color="#fff">
			<view class="scroll">
				<view class="popup-content" v-for="(item,index) in optionsStatus" :key="index"
					@click="changeStatus(item)"><text class="text">{{item.label}}</text></view>
			</view>
		</uni-popup> -->
		<!-- 位置 -->
		<!-- <uni-popup ref="popupPosition" background-color="#fff">
			<view class="scroll">
				<view class="popup-content" v-for="(item,index) in optionsPosition" :key="index"
					@click="changePosition(item)"><text class="text">{{item.label}}</text></view>
			</view>
		</uni-popup> -->
	</view>
</template>

<script lang="ts" setup>
	import {
		ref
	} from "vue";
	import {
		onPullDownRefresh,
		onReachBottom,
		onNavigationBarButtonTap,
		onPageScroll
	} from "@dcloudio/uni-app";
	import {
		repairApplyList,
		getStatus,
		repairConfirm,
		repairExec
	} from '@/common/api/repairEquipment'
	import {
		CONSTANT
	} from '@/common/config/config.ts'
	import {
		fromSearch
	} from '@/common/util/tabSearchUse.ts'
	import searchPopup from '@/pages/searchPopup/index.vue'
	import {
		getPosition
	} from '@/common/api/comAPI.ts'
	import {
		assetDetail
	} from "@/common/api/assetAPI.ts";
	const messageTip = ref()
		const handleShowOrHideTip = (type:string)=>{
			if(type=='yes'){
				dialogConfirm()
			}
		}

	/*
	 *
	 * 数据
	 * 
	 */
	let current = ref(0);
	const items = ref(["全部", "位置", "状态"]);
	const popup = ref(null)
	let popupStatus = ref(null)
	let optionsStatus = ref([])
	let optionsPosition = ref([])
	const popupPosition = ref(null)
	let alertDialog = ref(null)
	const dialogContent=ref('确认该设备已修复好,可以正常运行了吗？')
	let flag = ref(0)

	let showLoadMore = ref(false)
	let loadMoreText = ref('加载中...')

	let repairList = ref([])
	let repairItem = ref({})

	const page = ref(CONSTANT.initPage); //初始加载页码
	const rows = ref(CONSTANT.pageSize);

	const allPages = ref(0); //总页码数

	const searchParams = ref({
		assetApplyType: 3,
		status: null,
		assetName: null,
		applyUnits:null
	}); //查询条件
	const matchRule = {
		assetApplyType: 'eq',
		status: 'eq',
		assetName: 'cn',
		applyUnits:'eq'
	}; //匹配条件

	const toSearch = ref(null)
	// 搜索了列表
	function receive(e: any) {
		searchParams.value.assetName = e
		repairList.value = []
		getRepairList();
	}
	const toShow = ref(1)
	// 点击了搜索
	onNavigationBarButtonTap(() => {
		// 弹出搜索
		toShow.value++
	})
	
	const pickerRange=ref([])
	const pickerDisabled=ref(false)//控制picker是否禁用
	const currentTab=ref(0)

	/*
	 *
	 * 方法
	 * 
	 */
	const getPositionMethods = () => {
		getPosition().then((res: any) => {
			if (res.code == 0) {
				optionsPosition.value = res.data.records.map(item => {
					return {
						label: item.storeName,
						value: item.id
					}
				})
	
			}else{
				uni.showToast({
					title:res.message,
					icon:"none"
				})
			}
		})
	}
	getPositionMethods()
	const getRepairList = () => {
		let config = {
			page: page.value,
			rows: rows.value
		}
		const params = Object.assign(fromSearch(searchParams.value, matchRule), config)
		repairApplyList(params).then((res: any) => {
			uni.stopPullDownRefresh(); //关闭下拉
			if (res.code == 0) {
				allPages.value = res.data.pages;
				page.value = res.data.current;
				repairList.value = res.data.records;

				if (repairList.value.length === 0) {
					showLoadMore.value = true;
					loadMoreText.value = '暂无数据'
				} else if (repairList.value.length < CONSTANT.pageSize) {
					showLoadMore.value = true;
					loadMoreText.value = '没有更多的数据了'
				} else {
					showLoadMore.value = false;
				}
			}
		})
	}
	getRepairList()

	const getEnums = () => {
		getStatus('ExecDtlStatus').then((res: any) => {
			if (res.code == 0) {
				optionsStatus.value = res.data.ExecDtlStatus.map(item => {
					return {
						label: item.value,
						value: item.code
					}
				})
			}
		})
	}
	getEnums()

	const onClickItem = (e: any) => {
		page.value = CONSTANT.initPage
		currentTab.value=e.currentIndex
		if (e.currentIndex == 0) {
			// pickerDisabled.value=true
			searchParams.value.status = null
			searchParams.value.applyUnits = null
			items.value = ["全部", "位置", "状态"]
			getRepairList()
		}
		if (e.currentIndex == 1) {
			// pickerDisabled.value=false
			pickerRange.value=optionsPosition.value.map(item=>{
				return item.label
			})
		}
		if (e.currentIndex == 2) {
			// pickerDisabled.value=false
			pickerRange.value=optionsStatus.value.map(item=>{
				return item.label
			})
		}
	};
	// const changeStatus = (item: {}) => {
	// 	repairList.value=[]
	// 	searchParams.value.status = item.value
	// 	items.value[2]=item.label
	// 	getRepairList()
	// 	popupStatus.value.close()
	// }
	// const changePosition = (item: {}) => {
	// 	repairList.value=[]
	// 	searchParams.value.applyUnits = item.value
	// 	items.value[1]=item.label
	// 	getRepairList()
	// 	popupPosition.value.close()
	// }
	const repairEquipment = () => {
		popup.value.open('bottom')
	}
	const scan = () => {
		uni.scanCode({
			success: function(res1) {
				console.log('条码类型：' + res1.scanType);
				console.log('条码内容：' + res1.result);
				assetDetail(res1.result).then((res) => {
					if(res.code==0){
						// console.log(res.assetNo);
						uni.navigateTo({
							url: `/pages/scrapEquipment/submitScrapApply/index?scanResult=${res1.result}`,
						})
					}else{
						
						uni.showToast({
							icon:"none",
							title:'数据获取失败，请不要扫描其他无关的二维码！'
						})
					}
				});
				
			}
		});
		popup.value.close()
	}
	// 完成修复按钮
	const completeRepairBtn = (item) => {
		console.log(item);
		flag.value = 0
		dialogContent.value=`正在报废资产${item.assetName}，确认实施报废吗？`
		// alertDialog.value.open()
		messageTip.value.openTip()
		repairItem.value = item
	}
	const confirmRepairBtn = (item) => {
		flag.value = 1
		dialogContent.value='确认该设备已修复好,可以正常运行了吗？'
		// alertDialog.value.open()
		messageTip.value.openTip()
		repairItem.value = item
	}
	// 对话框确认按钮
	const dialogConfirm = () => {
		if (flag.value) {
			repairConfirm([{
				...repairItem.value
			}]).then((res: any) => {
				if (res.code == 0) {
					uni.showToast({
						title: res.message,
						icon:"none",
						duration:500
					});
					setTimeout(() => {
						getRepairList()
					}, 500)
				} else {
					uni.showToast({
						title: res.message,
						icon:"none"
					});
				}
			})
		} else {
			repairExec({
				...repairItem.value
			}).then((res: any) => {
				if (res.code == 0) {
					uni.showToast({
						title: res.message,
						icon:"none",
						duration:500
					});
					setTimeout(() => {
						getRepairList()
					}, 500)
				} else {
					uni.showToast({
						title: res.message,
						icon:"none"
					});
				}
			})
		}

	}
	// 去列表选择
	const inputNum = () => {
		uni.navigateTo({
			url: '/pages/assets/assetManage/index',
		})
		popup.value.close()
	}
	onPullDownRefresh(() => {
		page.value = CONSTANT.initPage; //重置页码
		repairList.value = []; //重置列表
		getRepairList();
	});
	onReachBottom(() => {
		//触发底部
		if (page.value > allPages.value || page.value == allPages.value) {
			loadMoreText.value = '没有更多的数据了'
			showLoadMore.value = true;
		} else {
			page.value++;
			loadMoreText.value = '加载中……';
			showLoadMore.value = true;
			getRepairList();
		}

	})
	const bindPickerChange = (e) => {
		repairList.value = []
		if(currentTab.value==1){//位置
			items.value[1] = pickerRange.value[e.detail.value]
			searchParams.value.applyUnits = optionsPosition.value[e.detail.value].value
			getRepairList()
		}else if(currentTab.value==2){//状态
			items.value[2] = pickerRange.value[e.detail.value]
			searchParams.value.status = optionsStatus.value[e.detail.value].value
			getRepairList()
		}
	}
</script>

<style scoped lang="scss">
	uni-page-body {
		height: 100%;
	}

	.check-assets {
		height: 100%;
		width: 100%;
		background-color: #f4f4f4;

		.segmented-control {
			background-color: #fff;
		}
	}

	.content {
		padding: 30px 0px 80px 0px;
	}

	.content-text {
		font-size: 14px;
		color: #666;
	}

	.card-title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10px;
		border-bottom: 1px solid #ebeef5;

		.right-txt {
			font-size: 12px;
		}
	}

	:deep(.uni-card__content) {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.slot-box {
		display: flex;
		justify-content: space-between;

		image {
			width: 150rpx;
			height: 150rpx;
			border-radius: 30rpx;
		}

		.list-content {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			margin-left: 30rpx;
		}
	}


	.uni-list-item {
		font-size: 14px !important;

		:deep(.uni-list-item__container) {
			padding-left: 0 !important;
		}
	}

	.start-button {
		width: 60%;
		box-sizing: border-box;
		background-color: #198a6c;
		line-height: 2;
		color: #fff;
	}

	.card-actions {
		text-align: right;
		border-top: 1px solid #ebeef5;
		padding-top: 20rpx;
	}

	.repair-btn {
		height: 50rpx;
		line-height: 50rpx;
		box-sizing: border-box;
		background-color: #198A6C;
		color: #fff;
		font-size: 12px;
		padding: 0 20rpx;
		margin-right: 0;
	}
</style>
